(function(){
    class Swiper{
        constructor(el){
           this.el = el;
           this.oUl = this.el.find(".screen ul");
           this.oOl = this.el.children("ol");
            this.imgIndex = 0;
            this.pointIndex = 0;
            this.timer = 0;

            this.init();
            this.mouseHandler();
            this.clickHandler();
        }
        init(){
            let strHtml = ``;
            for(var i=0;i<this.oUl.children().length;i++){
                strHtml +=`
                <li class = ${i==0?'current':''}>${i+1}</li>
                `
            }
            this.oOl.append(strHtml);
            this.oUl.children().eq(0).clone().appendTo(this.oUl);
            this.timer = setInterval(()=>{
                this.imgIndex++;
                this.pointIndex++;
                this.autoPlay();
            },1500)
        }

        autoPlay(){
            if(this.imgIndex>5){
                this.imgIndex=1;
                this.oUl.css({left:0});
            }
            this.oUl.animate({left:-1310 * this.imgIndex});

            if(this.pointIndex>4){
                this.pointIndex=0;
            }
            this.oOl.children().eq(this.pointIndex).addClass("current").siblings().removeClass();
        }

        mouseHandler(){
            this.el.on("mouseenter",()=>{
                clearInterval(this.timer);
            }).on("mouseleave",()=>{
                this.timer = setInterval(()=>{
                    this.imgIndex++;
                    this.pointIndex++;
                    this.autoPlay();
                },1500)
            })
        }

        clickHandler(){
            let self = this;
            this.el.on("click","ol>li",function(){
                let $index = $(this).index();
                self.imgIndex = self.pointIndex = $index;
                self.autoPlay();
            })
        }
   }



$.fn.extend({
    swiper(){
        new Swiper(this);
    }
})

})();
$(function () {
	$("#all").swiper();
})